<template>
	<!-- 个人捐赠页面 -->
	<view class="personal-donation">
		<view class="header">
			<view class="title">
				已捐金额（元）
			</view>
			<view class="amount">{{ donateMoney }}</view>
		</view>

		<!--  -->
		<view class="donate-list">
			<scroll-view class="scroll-donate-list" scroll-x="true">
				<view class="donate-item" v-for="(dona,index) in donatList" :key="index">
					<view class="donate-image">
						<u-image width="100%" height="300rpx" :src="dona.picUrl || dona.sysCharity.charityPic" @click="handleExamineImage(dona.picUrl || dona.sysCharity.charityPic)"></u-image>
					</view>
					<view class="donate-content">
						<view class="project-name">{{ dona.charityName }}</view>
						<view class="gap">
							<u-gap height="5" bg-color="#edb68f"></u-gap>
						</view>
						<view class="donate-amount">
						    {{ (dona.isFinish === 0 && !dona.picUrl) ? '待上传' : (dona.isFinish === 0 && dona.picUrl) ? '待确认' : '已捐赠' }}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { TAOtherDonateMoney, TAOtherDonateGoalBreakPromise, upload, submitDonateDiploma } from '@/api/goal.js'


	export default {

		data() {
			return {
				donatList: [],
				openId: null,
				flag: 'mine', // mine：我的 ta：他的
				donateMoney: 0, // 捐赠金额
				submitDonateDiploma: {} // 需要提交捐赠截图的项目
			}
		},

		async onLoad(options) {
			this.flag = options.flag
			this.openId = options.openId
			this.handleGetDonateMoney()
			this.handleGetDonateGoalBreakPromise()
		},

		methods: {

			// 获取用户的捐赠金额
			async handleGetDonateMoney() {
				if (this.openId === 'undefined') return
				const data = JSON.stringify({ openId: this.openId })
				try {
					const { resultData } = await TAOtherDonateMoney({ data })
					this.donateMoney = resultData.donateMoney / 100 // 金额单位：分
				} catch (e) {
					//TODO handle the exception
					this.donateMoney = 0
				}
			},

			// 获取捐赠项目
			async handleGetDonateGoalBreakPromise() {
				if (this.openId === 'undefined') return
				try{
					const data = JSON.stringify({ openId: this.openId })
					const { resultData } = await TAOtherDonateGoalBreakPromise({ data })
					this.donatList = resultData.list
				}catch(e){
					//TODO handle the exception
				}
			},
			
			// 查看图片
			handleExamineImage(imageUrl) {
				uni.previewImage({
					indicator: 'none',
					urls: [imageUrl]
				})
			}
		}
	}
</script>

<style lang="scss">
	.personal-donation {
		.header {
			width: calc(100vw - 80rpx);
			margin: 0 auto 24rpx;
			padding: 40rpx;
			background-image: linear-gradient(to right, #f16c39, #f5a743);
			border-radius: 8rpx;
			box-sizing: border-box;

			.title {
				margin-bottom: 24rpx;
				color: #fff;
				font-size: 32rpx;
			}

			.amount {
				padding-bottom: 48rpx;
				font-size: 48rpx;
				color: #fff;
			}
		}
	}

	// 发布列表
	.donate-list {
		margin: 0 auto;
		padding: 0 40rpx;
	}

	.scroll-donate-list {
		width: 100%;
		display: flex;
		flex-direction: row;
		white-space: nowrap;

		.donate-item {
			margin-right: 16rpx;
			width: 48.5%;
			display: inline-block;

			&:last-child {
				margin-right: 0;
			}

			.donate-image {
				height: 250rpx;
				overflow: hidden;
				
				.common {
					width: 100%;
					height: 300rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #e5e5e5;
				}
			}

			.donate-content {
				.project-name {
					margin-bottom: 16rpx;
					text-align: center;
				}

				.gap {
					margin-bottom: 12rpx;
				}

				.donate-amount {
					text-align: center;
				}
			}
		}
	}
</style>
